Improve responsiveness

1 files changed, 8 insertions, 116 deletions

diff --git a/src/app/groups/[groupId]/expenses/page.tsx b/src/app/groups/[groupId]/expenses/page.tsx
index 0047b1e..48f355b 100644
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/src/app/groups/[groupId]/expenses/page.tsx
@@ -1,4 +1,4 @@
-import { Badge } from '@/components/ui/badge'
+import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -8,8 +8,7 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { getGroup, getGroupExpenses } from '@/lib/api'
-import { cn } from '@/lib/utils'
-import { ChevronRight, Plus } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 
@@ -42,119 +41,12 @@ export default async function GroupExpensesPage({
       </div>
 
       <CardContent className="p-0">
-        {expenses.length > 0 ? (
-          expenses.map((expense) => (
-            <div
-              className={cn(
-                'border-t flex justify-between pl-6 pr-2 py-4 text-sm',
-                expense.isReimbursement && 'italic',
-              )}
-            >
-              <div>
-                <div>{expense.title}</div>
-                <div className="text-xs text-muted-foreground">
-                  Paid by{' '}
-                  <Badge variant="secondary">
-                    {
-                      group.participants.find((p) => p.id === expense.paidById)
-                        ?.name
-                    }
-                  </Badge>{' '}
-                  for{' '}
-                  {expense.paidFor.map((paidFor, index) => (
-                    <Badge variant="secondary" key={index} className="mr-1">
-                      {
-                        group.participants.find(
-                          (p) => p.id === paidFor.participantId,
-                        )?.name
-                      }
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-              <div className="flex items-center">
-                <div className="tabular-nums whitespace-nowrap font-bold">
-                  {group.currency} {expense.amount.toFixed(2)}
-                </div>
-                <Button size="icon" variant="link" className="-my-2" asChild>
-                  <Link href={`/groups/${groupId}/expenses/${expense.id}/edit`}>
-                    <ChevronRight className="w-4 h-4" />
-                  </Link>
-                </Button>
-              </div>
-            </div>
-          ))
-        ) : (
-          <p className="px-6 text-sm py-6">
-            Your group doesn’t contain any expense yet.{' '}
-            <Button variant="link" asChild className="-m-3">
-              <Link href={`/groups/${groupId}/expenses/create`}>
-                Create the first one
-              </Link>
-            </Button>
-          </p>
-        )}
-        {/* <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Title</TableHead>
-                <TableHead>Paid by</TableHead>
-                <TableHead>Paid for</TableHead>
-                <TableHead className="text-right">Amount</TableHead>
-                <TableHead className="w-0"></TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {expenses.map((expense) => (
-                <TableRow
-                  key={expense.id}
-                  className={cn(expense.isReimbursement && 'italic')}
-                >
-                  <TableCell>{expense.title}</TableCell>
-                  <TableCell>
-                    <Badge variant="secondary">
-                      {
-                        group.participants.find(
-                          (p) => p.id === expense.paidById,
-                        )?.name
-                      }
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="flex flex-wrap gap-1">
-                    {expense.paidFor.map((paidFor, index) => (
-                      <Badge variant="secondary" key={index}>
-                        {
-                          group.participants.find(
-                            (p) => p.id === paidFor.participantId,
-                          )?.name
-                        }
-                      </Badge>
-                    ))}
-                  </TableCell>
-                  <TableCell className="text-right tabular-nums whitespace-nowrap">
-                    {group.currency} {expense.amount.toFixed(2)}
-                  </TableCell>
-                  <TableCell>
-                    <Button
-                      size="icon"
-                      variant="link"
-                      className="-my-2"
-                      asChild
-                    >
-                      <Link
-                        href={`/groups/${groupId}/expenses/${expense.id}/edit`}
-                      >
-                        <ChevronRight className="w-4 h-4" />
-                      </Link>
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        ) : (
-          <div className="p-6">Your group doesn’t have any expense yet.</div>
-        )} */}
+        <ExpenseList
+          expenses={expenses}
+          groupId={groupId}
+          currency={group.currency}
+          participants={group.participants}
+        />
       </CardContent>
     </Card>
   )